<div class="row">
<div class="col-md-6">

<input multiple="true" id="{$f.name}-File" name="file" type="file" class="file-loading input-sm">
</div>
    
<div class="col-md-6">
<a target="_blank" {$f.name}-href href="{$vo[$f['name']]['url']}">{$vo[$f['name']]['name']}</a>
<input type="hidden" {$f.name}-id value="{$vo[$f['name']]['id']}" name="{$f.name}[id]">
<input type="hidden" {$f.name}-url value="{$vo[$f['name']]['url']}" name="{$f.name}[url]">
<input type="hidden" {$f.name}-name value="{$vo[$f['name']]['name']}" name="{$f.name}[name]">
</div>
</div>
<script type="text/javascript">
$(function(){
    $("#{$f.name}-File").fileinput({
        uploadUrl: "http://d.apicloud.com/mcm/api/file", 
        // showUpload:false,
        uploadExtraData:{
            type:'image/jpeg',
        },
        showPreview:false,
        ajaxSettings:{
            headers:{
                "Accept":"*/*",
                "X-APICloud-AppId":"{$Think.session.app_id}",
                "X-APICloud-AppKey":"{$Think.session.appKey}",
            }
        }
    });

    $("#{$f.name}-File").on('filebatchpreupload', function(event, data, previewId, index) {
        var jqXHR = data.jqXHR;
        var fname = "{$f.name}";
        jqXHR.complete(function(req){
            var data = req.responseJSON;
            $('[{$f.name}-name]').val(data.name);
            $('[{$f.name}-url]').val(data.url);
            $('[{$f.name}-id]').val(data.id);
            $('[{$f.name}-href]').attr('href',data.url);
            $('[{$f.name}-href]').text(data.name);


        });
    });
})    
</script>
